<template>
  <div class="box">
    <div class="b1">
      <img :src="list.img1" alt="" />
    </div>
    <div class="b2">
      <h5>¥{{ list.originprice }}</h5>
      <p>{{ list.proname }}</p>
      <span>{{ list.desc }}</span>
    </div>
    <div class="b3">
      <button @click="addCat(list.proid)">加入购物车</button>
    </div>
    <div class="b4">
      <topNav3>商品详情</topNav3>
    </div>
  </div>
</template>

<script>
import topNav3 from "../components/topNav3.vue";
export default {
  components: { topNav3 },
  data() {
    return {
      list: "",
    };
  },

  methods: {
    //加入购物车
    addCat(id) {
      if (!sessionStorage.getItem("token")) {
        this.$router.push({ name: "login" });
        return;
      }
      axios
        .post("http://121.89.205.189:3000/api/cart/add", {
          proid: id,
          num: 1,
          userid: sessionStorage.getItem("userid"),
          token: sessionStorage.getItem("token"),
        })
        .then((res) => {
          this.$router.push({ name: "shouye" });
        });
    },
    fanhui() {},
  },
  mounted() {
    this.$emit("fanhui2", 3);
    let params = { proid: this.$route.query.id };
    axios
      .get(`http://121.89.205.189:3000/api/pro/detail/${this.$route.query.id}`)
      .then((res) => {
        this.list = res.data.data;
      });
  },
};
</script>

<style scoped lang="less">
.box {
  width: 100%;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  overflow: hidden;
  background: #f4f4f4;
  > .b1 {
    width: 100%;
    height: 3.75rem;
    background: red;
    margin-top: 5px;
  }
  > .b2 {
    width: 100%;
    height: 2rem;
    background: white;
    box-sizing: border-box;
    padding: 0 0.1rem;

    > h5 {
      font-size: 18px;
      color: orange;
      margin-top: 0.15rem;
    }
    > p {
      font-size: 0.15rem;
      margin-top: 0.15rem;
      overflow: auto;
    }
    > span {
      font-size: 0.12rem;
      max-height: 0.66rem;
      color: #999999;
      margin-top: 0.15rem;
      overflow: auto;
    }
  }
  > .b3 {
    width: 100%;
    height: 55px;
    background: white;
    position: relative;
    margin-bottom: 55px;
    > button {
      width: 0.84rem;
      height: 0.3rem;
      border-radius: 0.55rem;
      background-image: linear-gradient(90deg, #ff9000 0%, #ff5000 98%);
      font-size: 12px;
      color: white;
      border: none;
      position: absolute;
      right: 5%;
      top: 30%;
    }
  }
  .b4 {
    width: 100%;
    height: 0.55rem;
    background: rgba(146, 145, 145, 0.46);
    position: fixed;
    top: 0;
    z-index: 999;
    > div {
      height: 0.55rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>